<template>
  <div>
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <div class="header_conrainer">
          <div class="logo">
            <img src="../../public/images/dt1 (1).jpg" 
            style="width:40px;height:40px;border-radius:50%" >
            </div>
          <div class="hearder_right">
            <a-menu
              theme="dark"
              mode="horizontal"
              :default-selected-keys="['/']"
              :style="{ lineHeight: '64px' }"
              @click="onClickChangeRouter"
            >
              <a-menu-item key="/">首页</a-menu-item>
              <a-menu-item key="/goods">商品</a-menu-item>
              <a-menu-item key="/order">订单</a-menu-item>
              <a-menu-item key="/vip">会员</a-menu-item>
              <a-menu-item key="/shezhi">设置</a-menu-item>
            </a-menu>
            <div @click="onBack">
              <a-dropdown>
                <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                  admin <a-icon type="up" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <span @click="onBack">退出登录</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </div>
      </a-layout-header>
      <a-layout class="home_bottom">
        <router-view></router-view>
      </a-layout>
    </a-layout>

    <div>
      <a-modal
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <p>{{ ModalText }}</p>
      </a-modal>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      collapsed: false,
      visible: false,
      confirmLoading: false,
      ModalText: "你是否要退出登录？如果需要退出请点‘OK’",
    };
  },
  methods: {
    onClickChangeRouter(path) {
      //点击切换
      // console.log(path);
      this.$router.push(path.key);
    },
    onBack() {
      //点击退出登录
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = "你是否要退出登录？如果需要退出请点‘OK’";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
        var token = localStorage.removeItem("token");
        this.$router.push("/login");
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.header_conrainer {
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  .hearder_right {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    div {
      color: white;
    }
  }
}
.home_bottom {
  width: 100%;
  height: 86vh;
}
</style>
